<template>
	<view v-if="set.curPage">
		<view style="width: 100%;height: 50px;"></view>
		<view  :class="set.animate.length?'moxi-tabbar-box animated '+set.animate:'moxi-tabbar-box'" 
		 :style="css" >
			<view class="moxi-tabbar-li" v-for="(list,key) in set.list" @click="navto(list.path)">
				<img :src="set.curKey==key?list.selectIcon:list.icon" alt="">
				<text :style="{color:set.curKey==key?set.selectColor:set.textColor}">{{list.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"moxi-tabbar",
		data() {
			return {
				css:""
			};
		},props:{
			set:{
				type:Object,
				default:{}
			}
		},created() {
			this.css += this.moxi.background(this.set.bgColor);
			if(this.set.isShadow==1&&this.set.boxShadow[4]){
				this.css += 'box-shadow:'+this.set.boxShadow[0]+'px '+this.set.boxShadow[1]+'px '
				+this.set.boxShadow[2]+'px '+this.set.boxShadow[3]+'px '+this.set.boxShadow[4]+';'
			}
		},methods:{
		
		}
	}
</script>

<style>
.moxi-tabbar-box{display: flex;flex-direction: row;justify-content: space-around;

height: 50px;position: fixed;bottom: 0;left: 0;width: 100%;
z-index: 10;}
.moxi-tabbar-li{display: flex;flex-direction: column;padding: 5px 0;cursor: pointer;align-items: center}
.moxi-tabbar-li img{max-width: 24px;max-height: 24px;}
.moxi-tabbar-li text{font-size: 13px;margin-top: 2px;}
</style>